<template>
	<view class="content">
		<view class="u-f-sbc" style="height: 100rpx;">
			<view class="title">{{$t('General.login.retrievePwd')}}</view>
			<!-- <view v-if="isMobile" style="position: relative;">
				<view class="u-f-ac" @click="showPopup">
					<text class="grayText">{{areaCode}}</text>
					<uni-icons v-if="isTap" type="top" color="#999" size="20"></uni-icons>
					<uni-icons v-else type="bottom" color="#999"  size="20"></uni-icons>
				</view>
				<view v-if="isTap" class="popup">
					<view v-for="(item,index) in areaCodeList" :key="index" class="item"  @click="chooseAreaCode(item)">{{item}}</view>
				</view>
			</view> -->
		</view>
		<view class="areaCode">
			<j-cell :title="$t('General.login.china')" tips="+86" :more="false"></j-cell>
		</view>
		<view class="main">
			<!-- <view v-if="isMobile" class="main-code">{{areaCode}}</view> -->
			<input :style="{'color':color}" class="main-input" @input="verifyInput" :placeholder="$t('General.login.inputPhone')"
				type="text" v-model="account">
		</view>
		<view class="foot-button">
			<view data-code="600010" data-eventName="click_forget_password_to_next"  class="next radius-btn" :class="{'next-active':active}" @click="active?nextAction():''">{{$t('General.login.nextStep')}}</view>
		</view>
		<!-- <view class="next" :class="{'next-active':active}" @click="nextAction">下一步</view> -->
		<!-- <view class="footer">
			<view class="u-f-ac" v-if="!isMobile" @click="changeType(true)"><uni-icons type="left" color="#999" size="20"></uni-icons>使用手机号码找回密码</view>
			<view class="u-f-ac u-f-end" v-else @click="changeType(false)">使用邮箱找回密码<uni-icons type="right" color="#999" size="20"></uni-icons></view>
		</view> -->
	</view>
</template>

<script>
	const {
		emailPattern,
		phonePattern
	} = require('@/utils/util.js');
	export default {
		data() {
			return {
				areaCode: '+86',
				areaCodeList: ['+86', '+855', '+66', '+84', '+1'],
				account: '',
				isTap: false,
				isMobile: true, //true是手机号，false是邮箱
				color: 'red'
			}
		},
		computed: {
			active() {
                // if (phonePattern(this.account) || emailPattern(this.account)) {
                if (phonePattern(this.account)) {
					return true;
				} else return false
			}
		},
		onLoad(opt) {
			console.log(opt.account);
			this.account = opt.account;
            this.verifyInput()
		},
        onShow() {
            uni.setNavigationBarTitle({
                title: this.$t('General.login.account_reset_forget_password')
            })
        },
		methods: {
			// 判断输入框是手机号或者邮箱
			verifyInput(e) {
				this.verification();
				if (phonePattern(this.account)) {
					console.log('手机号')
					this.isMobile = true;
				}
				// if (emailPattern(this.account)) {
				// 	console.log('邮箱')
				// 	this.isMobile = false;
				// }
			},
			verification() {
                // if (phonePattern(this.account) || emailPattern(this.account)) {
				if (phonePattern(this.account)) {
					this.color = '#000';
				} else {
					this.color = 'red';
				}
			},
			//下一步
			nextAction() {
				uni.showLoading({
					title: this.$t('General.login.sending')
				})
				if (this.isMobile) {
					this.sendPhoneCode(1)
				} else this.sendEmailCode(2)
			},
			//发送手机验证码
			sendPhoneCode() {
				let data = {phone:this.account,type:'fp',codeSize: 6}
				getApp().globalData.api.sendMobileVerifyCode(data, (result) => {
					uni.hideLoading();
					console.log('发送验证码：', result);
					let data = {
						uname: result.data,
						userId: result.userId,
						account: this.account,
						isMobile: 1,
						areaCode: this.areaCode
					}
					uni.navigateTo({
						url: '/jvss/pagesMine/forget-password/sendCode?data=' + JSON.stringify(data)
					})
				});
			},
			//发送邮箱验证码
			sendEmailCode() {
				getApp().globalData.api.sendfpLink(this.account, (result) => {
					uni.hideLoading();
					console.log(result, '发送邮箱验证码')
					let data = {
						uname: result.data,
						userId: result.userId,
						account: this.account,
						isMobile: 1,
						areaCode: this.areaCode
					}
					uni.navigateTo({
						url: '/jvss/pagesMine/forget-password/resetEmail?data=' + JSON.stringify(data)
					})
				});
			},
			// 选择区号
			chooseAreaCode(code) {
				this.areaCode = code
				this.isTap = false
			},
			//显示区号弹框
			showPopup(code) {
				this.isTap = !this.isTap
			},
			//切换找回密码方式
			changeType(e) {
				this.isMobile = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.areaCode {
		border-radius: 15rpx;
		overflow: hidden;
	}

	.content {
		padding: 40rpx;

		.title {
			font-size: 30rpx;
			font-weight: 700;
		}

		.grayText {
			color: #999;
		}

		.main {
			margin-top: 20rpx;
			background: white;
			border-radius: 15rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.main-code {
				width: 100rpx;
				color: #999;
			}

			.main-input {
				width: 480rpx;
				height: 100%;
			}
		}

		.next {
			margin-top: 40rpx;
			height: 80rpx;
			background: #999;
			color: white;
			//border-radius: 10rpx;
			justify-content: center;
			display: flex;
			align-items: center;
		}

		.next-active {
			background: white;
			border: 1rpx solid #999;
			color: #FF0025;
		}

		.footer {
			position: absolute;
			bottom: 80rpx;
			left: 30rpx;
			right: 30rpx;
			color: #999;
			// font-size: 26rpx;
		}

		.popup {
			position: absolute;
			background: white;
			border: 1rpx solid #999;
			border-radius: 10rpx;
			max-height: 350rpx;
			width: 120rpx;
			right: 0rpx;
			overflow: scroll;

			.item {
				color: #999;
				padding: 10rpx;
				border-bottom: 1rpx solid #f5f5f5;
			}
		}
	}

	.foot-button {
		width: calc(100% - 80rpx);
	}
</style>